<template>
	<view class="all">
		<view class="bg"></view>
		<view class="mess">
			<view class="messItem">
				<view class="left">
					<view>大美汽车维修店-洗车</view>
					<view>2035.3.11 11:09</view>
				</view>
				<view class="right">-50元</view>
			</view>
			<view class="messItem">
				<view class="left">
					<view>大美汽车维修店-洗车</view>
					<view>2035.3.11 11:09</view>
				</view>
				<view class="right">-50元</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	
		

	
</script>

<style scoped>
	.all{
		padding-top: 10rpx;
		box-sizing: border-box; 
		position: relative;
		z-index: 1;
	}
	.bg{
		background-color: #0472fe;
		width: 100%;
		height: 300rpx;
		position: absolute;
		z-index: -1;
		top: 0;
		right: 0;
	}
	.mess{
		background-color: #fff;
		border-radius: 20rpx;
		margin: 20rpx 10rpx;
		padding: 30rpx;
		min-height: 300rpx;
		
	}	

	.messItem{
		display: flex;
		justify-content: space-between;
		padding: 20rpx 20rpx;
		/* border-bottom:  1rpx solid #eee; */
	}
	.messItem:not(:last-child) {
	  border-bottom: 1rpx solid #eee;
	}
	.left :nth-child(1){
		margin-bottom: 10rpx;
	}	
	.left :nth-child(2){
		font-size: 24rpx;
		opacity: .6;
	}	
	.right{
		margin-top: 20rpx;
	}
</style>
